<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" th:href="@{/images/a/logo.ico}"/>
    <title th:text="${title}"></title>
    <script type="text/javascript" th:src="@{/js/jquery-1.11.2.min.js}"></script>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/commit.css}">
    <script th:src="@{/js/bootstrap.js}"></script>
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">

    <!--   回显需要的-->
    <link rel="shortcut icon" th:href="@{https://pandao.github.io/editor.md/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/css/editormd.min.css}">
    <link rel="stylesheet" th:href="@{/css/editormd.preview.css}">

    <!--  回显必须加的js-->
    <script th:src="@{/lib/marked.min.js}"></script>
    <script th:src="@{/lib/prettify.min.js}"></script>
    <script th:src="@{/lib/raphael.min.js}"></script>
    <script th:src="@{/lib/underscore.min.js}"></script>
    <script th:src="@{/lib/sequence-diagram.min.js}"></script>
    <script th:src="@{/lib/flowchart.min.js}"></script>
    <script th:src="@{/lib/jquery.flowchart.min.js}"></script>
    <script th:src="@{/js/editormd.js}"></script>

    <style>
        .card1 {
            position: relative;
            width: 200px;
            height: 250px;
            border-radius: 14px;
            z-index: 1111;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;;
        }

        .bg {
            position: absolute;
            top: 5px;
            left: 5px;
            width: 190px;
            height: 240px;
            z-index: 2;
            background: rgba(255, 255, 255, .95);
            backdrop-filter: blur(24px);
            border-radius: 10px;
            overflow: hidden;
            outline: 2px solid white;
        }

        .blob {
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            width: 150px;
            height: 150px;
            border-radius: 50%;
            background-color: #ff0000;
            opacity: 1;
            filter: blur(12px);
            animation: blob-bounce 5s infinite ease;
        }

        @keyframes blob-bounce {
            0% {
                transform: translate(-100%, -100%) translate3d(0, 0, 0);
            }

            25% {
                transform: translate(-100%, -100%) translate3d(100%, 0, 0);
            }

            50% {
                transform: translate(-100%, -100%) translate3d(100%, 100%, 0);
            }

            75% {
                transform: translate(-100%, -100%) translate3d(0, 100%, 0);
            }

            100% {
                transform: translate(-100%, -100%) translate3d(0, 0, 0);
            }
        }
    </style>
</head>

<body style="background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);">

<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
    <div class="container-fluid">
        <a class="navbar-brand ms-5" th:href="@{#}">博客</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav col-10">
                <li class="nav-item ">
                    <a class="nav-link active" aria-current="page" th:href="@{/blog/showText}">返回</a>
                </li>
            </ul>
            <form class="d-flex me-5 col-2" role="search">
                <span style="font-size: 20px; font-family:'微软雅黑" class="me-2"
                      th:text="${session.username}">姓名</span>
                <img th:src="|@{/images/}${session.pic}|" alt="Logo" width="50" height="50"
                     style="border-radius: 50px" class="d-inline-block align-text-top">
                <span style="font-size: 15px;"></span>
            </form>
        </div>
    </div>
</nav>

<div class="container " style="width: 90%">
    <div class="row" th:if="${status==1}">审核已通过</div>
    <div class="row" th:if="${status==0}">草稿--待审核</div>
    <div class=" mt-5 p-3" style="border: 1px solid; background-color: #f1f3f4">
        <div class="row">
            <div id="title">
                <h3>
                    <span>题目:</span>
                    <span id="sessionT" th:text="${title}"></span>
                </h3>
            </div>
        </div>
        <br/>
        <h5 id="subtitle" style="margin: 0 auto;">
            <span>摘要：</span>
            <span th:text="${subtitle}"></span>
        </h5>
        <button class="btn btn-primary mt-2 mb-2" id="download-button">下载</button>

        <p>
            <span>时间：</span>
            <span id="time" class="small" th:text="${time}">博客时间</span>
            <span>分类：</span>
            <span class="small" th:text="${cid}">分类</span>
            <span class="small" th:text="${mid}">分类</span>
        </p>

        <div id="test-editormd-view" style="margin: 0 auto">
          <textarea id="editormd-name" name="test-editormd-markdown-doc">
          </textarea>
        </div>
    </div>
</div>
<div th:if="${status==1}">
    <div th:replace="~{comment_section::commit-section-template}"></div>
</div>


<!--<script th:src="@{/js/bootstrap.bundle.js}"></script>-->
<script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
<script>
    $(document).ready(function () {

        /**
         * 返回
         */
        $('#return').click(function () {
            window.location.href = "/blog/intoMain";
        });
        /**
         * 尝试 通过传入参数到后端 记录id值
         */
        let m;
        //1.第一种显示文章的方式
        let testEditormdView;
        // let title = document.getElementById("sessionT").innerText;
        let title = '[[${title}]]'
        console.log("异步回显 标题" + title)
        $.get("showMarkdown", {title: '[[${title}]]'}, function (markdown) {
            m = markdown;
            editormd.markdownToHTML("test-editormd-view", {
                // 从数据库里得到数据
                markdown: markdown,
                htmlDecode: "style,script,iframe",
                tocm: true,
                width: "80%",
                tex: true,
                emoji: true,
                taskList: true,
                flowChart: true,
                sequenceDiagram: true
            });

        });

        // 绑定下载按钮的点击事件
        document.getElementById('download-button').addEventListener('click', function () {
            // var markdownContent = testEditormdView.getMarkdown(); // 获取 Markdown 内容
            var markdownContent = m; // 获取 Markdown 内容

            // 创建一个 Blob 对象，表示要下载的文件内容
            var blob = new Blob([markdownContent], {type: "text/plain;charset=utf-8"});

            // 创建一个隐藏的 a 标签
            var downloadLink = document.createElement("a");
            downloadLink.href = URL.createObjectURL(blob); // 创建指向该对象的URL
            downloadLink.download = "document.md"; // 设置下载的文件名

            // 触发点击事件
            document.body.appendChild(downloadLink); // 将 a 标签添加到 body 中
            downloadLink.click(); // 模拟点击
            document.body.removeChild(downloadLink); // 然后移除 a 标签

            // 释放 URL 对象
            URL.revokeObjectURL(downloadLink.href);
        });

//评论区
        //提交评论
        // $("#submit-commit").click(function () {
        //     $.ajax({
        //         url: "/CommitController/addCommit",
        //         type: "POST",
        //         data: {
        //             commit: $("#input-commit").val(),
        //         },
        //         dataType: "json",
        //         success: function (data) {
        //             alert(data.result);
        //             location.reload();
        //         },
        //     })
        // })

        //回复按钮，回复框弹出
        // function showReplyBox(commentId) {
        //     $(".reply-box").css("display", "none"); // 使用 jQuery 的 .css() 方法来设置样式
        //     // 显示特定评论的回复框
        //     let replyBox = $("#reply-box-" + commentId);
        //     console.log(replyBox); // 这将打印出 jQuery 对象，不是原生的 DOM 元素
        //     replyBox.css("display", "block"); // 使用 jQuery 的 .css() 方法来显示特定的回复框
        // }
        //
        // $(".reply-btn").click(
        //     function () {
        //         showReplyBox($(this).data("reply"))
        //     }
        // )

        //发送按钮的申请
        // function submitReply(commentId) {
        //     $.ajax({
        //         url: "/CommitController/addRecover",
        //         data: {
        //             commit_time: $("#reply-submit-" + commentId).data("committime"),
        //             recover_content: $("#textarea-" + commentId).val(),
        //         },
        //         success: function (data) {
        //             alert(data.result);
        //             location.reload()
        //         }
        //     })
        //     // 发送后，可以清空textarea并隐藏回复框
        //     $("#textarea-" + commentId).val(null);
        //     $("#reply-box-" + commentId).css("display", "none");
        // }
        //
        // $(".reply-submit").click(
        //     function () {
        //         submitReply($(this).data("reply"))
        //     }
        // );

        //删除评论
        // $(".delete-commit").click(function () {
        //     $.ajax({
        //         url: "/CommitController/DeleteCommit",
        //         data: {
        //             commit_content: $(this).data("commitcontent"),
        //             commit_time: $(this).data("committime"),
        //             commit_id: $(this).data("commitid"),
        //         },
        //         success: function (data) {
        //             alert(data.result);
        //             location.reload()
        //         }
        //     })
        // })
        //删除回复
        // $(".delete-recover").click(function () {
        //     $.ajax({
        //         url: "/CommitController/DeleteRecover",
        //         data: {
        //             commit_time: $(this).data("committime"),
        //             recover_time: $(this).data("recovertime"),
        //             recover_content: $(this).data("recovercontent"),
        //         },
        //         success: function (data) {
        //             alert(data.result);
        //             location.reload()
        //         }
        //     })
        // })
    });
</script>
</body>

</html>
